import vueImage from "@/assets/vue.svg";
import { VIEW_PADDING_TOP } from "@/constants";
import { Button } from "@arco-design/web-vue";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

const HomeView = defineComponent({
  setup() {
    const router = useRouter();

    const goToAbout = () => {
      router.push("/about");
    };

    return () => (
      <div style={{ paddingTop: VIEW_PADDING_TOP }}>
        <h2>HomeView</h2>
        <div>
          <a href="https://vite.dev" target="_blank" rel="noreferrer">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
          </a>
          <a href="https://vuejs.org/" target="_blank" rel="noreferrer">
            <img src={vueImage} class="logo vue" alt="Vue logo" />
          </a>
        </div>
        <Button onClick={goToAbout}>Go to About</Button>
      </div>
    );
  },
});

export default HomeView;
